<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>demo</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<style type="text/css">

		</style>

	</head>
	<body>
		<!-- 头部开始 -->
		<div class="header">
			<!-- 导航 -->
			<div class="nav">
				<!-- left开始 -->
				<div class="left">
					<p class="p1"><b>C<span>a</span>lm</b>Free Creative Simple Portfolio</p>

					<p class="p2">Welcome Ladies & Gents to Calm Website.</p>
					<p class="p3">A theme more stylish than any other on ThemeForest.</p>
				</div>
				<!-- rigth开始 -->
				<div class="right">
					<ul>
						<li><a href="#">home</a></li>
						<li><a href="#">about</a></li>
						<li><a href="#">porifolio</a></li>
						<li><a href="#">support</a></li>
						<li><a href="#">contact</a></li>
					</ul>
					<div class="search"><img src="img/search.png"></div>
					<!-- btm_div开始 -->
					<div class="btm_div">
						<p>FIND US ONLINE</p>
						<img src="img/logo_01.png">
						<img src="img/logo_02.png">
						<img src="img/logo_03.png">
						<img src="img/logo_04.png">
						<img src="img/logo_05.png">
					</div>
				</div>
			</div>
		</div>
		<!-- 头部结束 -->

		<!-- 内容开始 -->
		<div class="content">
			<h4>All&nbsp / &nbsp Design &nbsp / &nbsp Branding&nbsp/&nbsp Graphic&nbsp /
				&nbsp Animation&nbsp /&nbsp Illustration&nbsp /&nbsp Photography
			</h4>
			<div class="container">
				<!-- 第一行 -->
				<div class="row ">
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_01.png" alt="...">
						</a>
						<h3>Working in Shop</h3>
						<p>Branding / Design </p>
					</div>
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_02.png" alt="...">
						</a>
						<h3>Touch and Swipe</h3>
						<p>Branding / Design </p>
					</div>
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_03.png" alt="...">
						</a>
						<h3>What if you hire Arek</h3>
						<p>Branding / Design </p>
					</div>
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_04.png" alt="...">
						</a>
						<h3>What if you hire Arek</h3>
						<p>Branding / Design </p>
					</div>
				</div>
				<!-- 第二行 -->
				<div class="row ">
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_05.png" alt="...">
						</a>
						<h3>Working in Shop</h3>
						<p>Branding / Design </p>
					</div>
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_06.png" alt="...">
						</a>
						<h3>Touch and Swipe</h3>
						<p>Branding / Design </p>
					</div>
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_07.png" alt="...">
						</a>
						<h3>What if you hire Arek</h3>
						<p>Branding / Design </p>
					</div>
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_08.png" alt="...">
						</a>
						<h3>What if you hire Arek</h3>
						<p>Branding / Design </p>
					</div>
				</div>
				<!-- 第三行 -->
				<div class="row ">
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_09.png" alt="...">
						</a>
						<h3>Working in Shop</h3>
						<p>Branding / Design </p>
					</div>
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_10.png" alt="...">
						</a>
						<h3>Touch and Swipe</h3>
						<p>Branding / Design </p>
					</div>
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_11.png" alt="...">
						</a>
						<h3>What if you hire Arek</h3>
						<p>Branding / Design </p>
					</div>
					<div class="col-xs-6 col-md-3">
						<a href="#" class="thumbnail">
							<img src="img/Home_12.png" alt="...">
						</a>
						<h3>What if you hire Arek</h3>
						<p>Branding / Design </p>
					</div>
				</div>
			</div>
		</div>

		</div>
		<!-- 内容结束 -->

		<!-- 底部导航开始 -->
		<div class="footer">
			<div class="container">
				<div class="row">
					<div class="col-xs-6 col-md-3 div1">
						<h3>About us</h3>
						<p>
							Duis id eros ac eros cursus gravida a non magna.
							Sed vitae nisl diam, non sollicitudin mi. In dui arcu,
							rhoncus ac consequat eget, cursus sit amet risus.

						</p>
						<p>
							Address: Street 9890, New Something 1234,
							Country <br>
							Telephone: 1234 5678 <br>
							Fax: 9876 5432
						</p>
						<div class="logol">
							<img src="img/logol_01.png">
							<img src="img/logol_02.png">
							<img src="img/logol_03.png">
							<img src="img/logol_04.png">
							<img src="img/logol_05.png">
						</div>
					</div>
					<div class="col-xs-6 col-md-3 div2">
						<h3>Latest Posts</h3>
						<h4>Curabitur pharetra, ante!</h4>
						<p>25 April 2013</p>
						<h4>Gentle Marimba by Alastair Cameron</h4>
						<p>01 May 2013</p>
						<h4>Curabitur pharetra, ante!</h4>
						<p>25 April 2013</p>
						<h4>Gentle Marimba by Alastair Cameron</h4>
						<p>01 May 2013</p>
					</div>
					<div class="col-xs-6 col-md-3 div3">
						<h3>LATEST COMMENTS</h3>
						<div class="list1">
							<p>
								Dann Petty on Curabitur pharetra, ante
								lobortis dictum.
							</p>
						</div>
						<div class="list1">
							<p>
								Kevin Kalde on Aliquam vulputate, pede vel
								vehicula accumsan, mi neque rutrum erat,
								eu congue orci lorem eget lorem.
							</p>
						</div>
						<div class="list1">
							<p>
								Sean McCabe on Class aptent taciti sociosqu
								ad litora torquent per
							</p>
						</div>


					</div>
					<div class="col-xs-6 col-md-3 div4">
						<h3>FLICKR PHOTOSTREAM</h3>
						<!-- 第一行 -->
						<div class="row ">
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_01.png" alt="...">
								</a>
							</div>
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_02.png" alt="...">
								</a>
							</div>
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_03.png" alt="...">
								</a>
							</div>
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_04.png" alt="...">
								</a>
							</div>
						</div>
						<!-- 第二行 -->
						<div class="row ">
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_05.png" alt="...">
								</a>
							</div>
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_06.png" alt="...">
								</a>
							</div>
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_07.png" alt="...">
								</a>
							</div>
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_08.png" alt="...">
								</a>
							</div>
						</div>
						<!-- 第三行 -->
						<div class="row ">
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_09.png" alt="...">
								</a>
							</div>
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_10.png" alt="...">
								</a>
							</div>
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_11.png" alt="...">
								</a>
							</div>
							<div class="col-xs-6 col-md-3">
								<a href="#" class="thumbnail">
									<img src="img/Homel_12.png" alt="...">
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<hr>
					<p class="left1">Copyright 2013 Calm. All Rights Reserved.</p>

					<p class="right1">Home &nbsp; &nbsp; About &nbsp;&nbsp; Portfolio
						&nbsp;&nbsp; Blog &nbsp;&nbsp; Features &nbsp;&nbsp; Contact</p>

				</div>
			</div>

		</div>
		<!-- 底部导航结束 -->

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="js/jquery.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>
